<template>
  <div>
    <div class="c-header-border">
      <el-row :gutter="8">
        <el-col :span="12">
          <div class="c-header-bg">
            <div class="c-header-title">到期汇总</div>
            <div id="main" class="pie-wrap" style="height: 455px"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="c-header-bg">
            <div class="c-header-title">到期汇总列表</div>
          </div>
          <div class="c-header-between"></div>
          <el-row :gutter="8">
            <el-col :span="14">
              <div class="c-header-bg">
                <div class="c-header-title">资产到期情况</div>
                <div id="property" style="height: 186px"></div>
              </div>
            </el-col>
            <el-col :span="10">
              <div class="c-header-bg">
                <div class="c-header-title">融资到期情况</div>
                <div id="propertys" style="height: 186px"></div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    init() {
      var chartDom = document.getElementById("main");
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        legend: {
          top: "bottom",
          orient: "vertical",
          itemGap: 10,
          itemWidth: 10,
          itemHeight: 10,
          icon: "circle",
          itemStype: {
            color: {
              type: "radiul",
            },
          },
          textStyle: {
            fontSize: 12,
            color: "#ffffff",
          },
          // padding: [0, 1, 1, 1],
        },

        toolbox: {
          show: true,
          formatter: "{a} <br/>{b} : {c} ({d}%)",
          feature: {
            mark: { show: true },
          },
        }, 
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [0, 150],
            center: ["50%", "35%"],
            roseType: "single",
            itemStyle: {
              borderRadius: 0,
            },
            label: {
              show: false,
              position: "left",
            }, 
            data: [
              { value: 40, name: "资产", itemStyle: { color: "#B2EAF2" } },
              { value: 38, name: "融资", itemStyle: { color: "#6DDDEA" } },
              { value: 32, name: "票据", itemStyle: { color: "#0ABFD0" } },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    initProperty() {
      var chartDom = document.getElementById("property");
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: ["应付ABSssssss", "银行保理ssssss", "多级流转test-test", "应收帐款ABS"],
          axisLabel: {
            interval: 0,
            inside: false,
            textStyle: { 
              color: "#fff",
              fontSize: "10",
              itemSize: "",
            },
          },
           
          },
        grid: {               //高低间距
          left: "1%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          right: "0%",
          left: "0%",
          axisLine: { 
            lineStyle: {
              color: "#fff",
            },
          },
          axisLine: {           //x轴线
              show: true,
              lineStyle: {
                type: 'solid', 
                color: '#325e6C',
              },
              textStyle:{
                color:"blue",
              }
          }, 
          axisLabel: {            //x轴的字
              textStyle: {
                interval: 0, 
                inside: false,
                // fontSize: setFontSize(12),
                fontSize: '12px',
                color: '#FFFFFF',  
                itemSize: "", 
              },
            },
          splitLine: {        //隐藏轴线
              show: false,
          }, 
          // data:['100','200']
        },
        series: [
          {
            data: [120, 200, 150, 80],
            type: "bar",
            color: {
              type: "linear",
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#47BFD0", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#7EE3ED", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            barWidth: 25,
          },
        ],
      };
      option && myChart.setOption(option);
    },
    initPropertys() {
      var chartDom = document.getElementById("propertys");
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: ["债卷", "贷款"],
          left: "3%",
          axisLabel: {
            interval: 0,
            inside: false,
            textStyle: {
              color: "#fff",
              fontSize: "10",
              itemSize: "",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          left: "10%",
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          // data:['100','200']
        },
        series: [
          {
            data: [120, 200],
            type: "bar",
            barWidth: 25,
            color: {
              type: "linear",
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#47BFD0", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#7EE3ED", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.init();
    this.initProperty();
    this.initPropertys();
  },
};
</script>